<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>赛制设置</title>
    <link rel="icon" th:href="@{/source/favicon.ico}" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="赛制设置">
    <meta name="description" content="赛制设置">
    <meta name="author" content="lsy">
    <link th:href="@{/source/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/source/css/materialdesignicons.min.css}" href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link th:href="@{/source/css/style.min.css}" href="/css/style.min.css" rel="stylesheet">
    <style>
        /* 给表格添加边框 */
        #groupTable {
            border-collapse: collapse;
            border: 1px solid #ddd;
        }

        /* 给表格的 th 和 td 添加边框 */
        #groupTable th, #groupTable td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        /* Button styles */
        .btn {
            background-color: #007bff;
            border-color: #007bff;
            color: #fff;
            font-weight: bold;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease-in-out;
        }

        /* Button hover styles */
        .btn:hover {
            background-color: #0069d9;
            border-color: #0062cc;
            color: #fff;
        }

        /* Button active styles */
        .btn:active {
            background-color: #005cbf;
            border-color: #0056b3;
            color: #fff;
        }
    </style>

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a th:href="@{/index}" href="index.html"><img th:src="@{/source/img/logo-sidebar.png}"
                                                              src="images/logo-sidebar.png"
                                                              title="Kun" alt="Kun"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">

                        <li class="nav-item"><a th:href="@{/main}" href="index.html">
                            在线投票系统</a></li>
                        <li sec:authorize="hasRole('3')" class="nav-item"><a th:href="@{/singer}" href="index.html">
                            歌手报名信息</a></li>
                        <li sec:authorize="hasRole('2')" class="nav-item"><a th:href="@{/votepagejudge}"
                                                                             href="index.html">
                            评委投票</a></li>
                        <li sec:authorize="hasRole('1')"><a th:href="@{/battlecontrol}" href="lyear_pages_add_doc.html">PK控制</a></li>
                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">用户管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/user/doSingerList}" href="lyear_pages_gallery.html">歌手管理</a></li>
                                <li><a th:href="@{/user/doJudgeList}" href="lyear_pages_add_doc.html">评委管理</a></li>
                                <li><a th:href="@{/user/doStuffList}" href="lyear_pages_add_doc.html">工作人员管理</a>
                                </li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">投票管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/votepage}" href="lyear_pages_gallery.html">观众投票</a></li>
                                <li><a th:href="@{/votepagejudge}" href="lyear_pages_add_doc.html">评委投票</a></li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">统计管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/votescountlist}" href="lyear_pages_gallery.html">选手得票统计</a></li>
                            </ul>
                        </li>

                        <li sec:authorize="hasRole('0')" class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)">赛制管理</a>
                            <ul class="nav nav-subnav">
                                <li><a th:href="@{/screen}" href="lyear_pages_gallery.html">屏幕管理</a></li>
                                <li><a th:href="@{/battlelist}" href="lyear_pages_add_doc.html">赛制设置</a></li>
                                <li><a th:href="@{/battlecontrol}" href="lyear_pages_add_doc.html">PK控制</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">

                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 系统中心 </span>
                    </div>
                </div>

                <h1><span sec:authorize="hasRole('0')">[管理员]</span>
                    <span sec:authorize="hasRole('1')">[工作人员]</span>
                    <span sec:authorize="hasRole('2')">[评委]</span>
                    <span sec:authentication="principal.username"></span>
                </h1>
                <a th:href="@{/user/logout}" href="#"> 退出登录</a>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <h1>点击分组按钮开始分组，再次点击则重新分组！</h1>
                                    <h2>分组列表</h2>
                                    <!-- 分页栏和分组列表 HTML 代码 -->
                                    <div id="groupContainer">
                                        <table id="groupTable" class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th>组编号</th>
                                                <th>选手A编号</th>
                                                <th>选手B编号</th>
                                            </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                        <button id="loadGroupsButton" class="btn">分组</button>
                                        <!-- 分页栏 HTML 代码 -->
                                        <div id="pagination" class="pagination"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" th:src="@{/source/js/jquery.min.js}" src="js/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/bootstrap.min.js}" src="js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/perfect-scrollbar.min.js}"
        src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" th:src="@{/source/js/main.min.js}" src="js/main.min.js"></script>

<script>

    $(document).ready(function () {
        // 绑定按钮的 click 事件
        $('#loadGroupsButton').click(function () {
            loadGroups();
        });
    });

    function loadGroups() {
        $.ajax({
            url: '/groups', // 后端 API 地址
            type: 'GET',
            success: function (data) {
                console.log(data)
                console.log(data.groupList)
                // 成功获取组信息后，动态生成表格内容
                var groupTableBody = $('#groupTable tbody');
                groupTableBody.empty(); // 清空表格内容
                for (var i = 0; i < data.groupList.length; i++) {
                    var group = data.groupList[i];
                    var tr = $('<tr>'); // 创建一个新的表格行
                    tr.append($('<td>').text(group.groupId));
                    tr.append($('<td>').text(group.userAId));
                    tr.append($('<td>').text(group.userBId));
                    groupTableBody.append(tr); // 添加到表格中
                }
            },
            error: function (xhr, status, error) {
                // 处理获取组信息失败的情况
                alert('分组失败，请确保歌手数量为偶数！');
                console.log(error)
            }
        });
    }

    // 每页显示的记录数
    const pageSize = 8;

    // 获取分组列表
    function showGroups(pageNum, pageSize) {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const pageResult = JSON.parse(xhr.responseText);
                updateGroupTable(pageResult.groupList);
                updatePagination(pageResult.currentPage, pageResult.totalPages);
            }
        };
        xhr.open("GET", "/showGroups?pageNum=" + pageNum + "&pageSize=" + pageSize, true);
        xhr.send();
    }

    // 更新分组列表
    function updateGroupTable(groupList) {
        const tbody = document.getElementById("groupTable").getElementsByTagName("tbody")[0];
        tbody.innerHTML = "";
        for (let i = 0; i < groupList.length; i++) {
            const group = groupList[i];
            const tr = document.createElement("tr");
            tr.innerHTML = "<td>" + group.groupId + "</td>" +
                "<td>" + group.userAId + "</td>" +
                "<td>" + group.userBId + "</td>";
            tbody.appendChild(tr);
        }
    }

    // 更新分页栏
    function updatePagination(currentPage, totalPages) {
        const pagination = document.getElementById("pagination");
        pagination.innerHTML = "";
        if (totalPages > 1) {
            const paginationContainer = document.createElement("div");
            paginationContainer.style.display = "flex";
            paginationContainer.style.justifyContent = "center";

            const prevButton = document.createElement("button");
            prevButton.innerHTML = "上一页";
            prevButton.disabled = (currentPage === 1);
            prevButton.onclick = function () {
                showGroups(currentPage - 1, pageSize);
            };
            paginationContainer.appendChild(prevButton);

            const pageButtons = document.createElement("div");
            pageButtons.className = "page-buttons";
            for (let i = 1; i <= totalPages; i++) {
                const pageButton = document.createElement("button");
                pageButton.innerHTML = i;
                if (i === currentPage) {
                    pageButton.className = "active";
                }
                pageButton.onclick = function () {
                    showGroups(parseInt(this.innerHTML), pageSize);
                };
                pageButtons.appendChild(pageButton);
            }
            paginationContainer.appendChild(pageButtons);

            const nextButton = document.createElement("button");
            nextButton.innerHTML = "下一页";
            nextButton.disabled = (currentPage === totalPages);
            nextButton.onclick = function () {
                showGroups(currentPage + 1, pageSize);
            };
            paginationContainer.appendChild(nextButton);

            pagination.appendChild(paginationContainer);
        }
    }

    // 初始化页面数据
    showGroups(1, pageSize);

</script>
</body>
</html>